<template>
    <div id="header">
        <!-- top -->
        <div class="top">
            <div class="siteWidth">
                <div class="wel">
                    您好，欢迎来到 南昌航空大学！
                    <span class="datetime"></span>
                </div>
                <!-- 用户信息和退出登录按钮 -->
                <div class="user-info">
                    <span v-if="employeeNumber">欢迎，{{ employeeNumber }}</span>
                    <span v-if="employeeDepartment">，{{ employeeDepartment }}</span>
                    <el-button type="text" class="logout-button" @click="logout">退出登录</el-button>
                </div>
            </div>
        </div>
        <!-- logobar -->
        <div class="logobar siteWidth">
            <h1 title="南昌航空大学" id="logo">
                <img src="@/assets/nchu.png" alt="logo" />
            </h1>
            <div class="s-form">
                <div class="input-box">
                    <input
                        type="text"
                        class="from-control"
                        id="inputkeyword"
                        maxlength="50"
                        name="wd"
                        data-url="/SearchKeywordRecord/GetAssociativeWord"
                        placeholder="请输入关键词"
                        autocomplete="off"
                        spellcheck="false"
                        v-model="keyword"
                    />
                    <div class="dropdown-word"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent, computed } from 'vue';
import { useRouter } from 'vue-router';

export default defineComponent({
    name: 'TopBar',
    setup() {
        const router = useRouter();
        const employeeNumber = computed(() => localStorage.getItem('employeeNumber') || '');
        const employeeDepartment = computed(() => localStorage.getItem('employeeDepartment') || '');
        const logout = () => {
            // 退出登录，清除 localStorage 和路由
            localStorage.removeItem('employeeNumber');
            localStorage.removeItem('isAuthenticated');
            localStorage.removeItem('employeeDepartment');
            router.push('/login');
        };

        return {
            employeeNumber,
            logout,
            employeeDepartment
        };
    }
});
</script>


<style scoped>
/*header*/
#header {
    background: #0849a3;
    position: fixed; /* 固定在顶部 */
    top: 28px; /* 根据.top的高度设置 */
    left: 0;
    width: 100%; /* 确保宽度覆盖整个视口 */
    z-index: 99; /* 确保在.top之下 */
}

.top {
    position: fixed; /* 固定在顶部 */
    top: 0;
    left: 0;
    height: 28px;
    line-height: 28px;
    background: #073f8d;
    color: #e4e7ef;
    font-size: 12px;
    z-index: 100;
    width: 100%; /* 确保宽度覆盖整个视口 */
}

.wel {
    float: left;
    left: 5px;
}



/* 搜索条 */
.s-form {
    width: 239px;
    height: 31px;
    position: absolute;
    top: 17px;
    right: 0px;
}

.s-form .select-box {
    display: none;
}

.s-form .input-box {
    float: left;
    _display: inline;
    width: 200px;
    overflow: hidden;
}

.s-form .input-box input {
    display: block;
    width: 190px;
    height: 30px;
    line-height: 30px;
    padding: 0 0 0 10px;
    background: white;
    font-size: 12px;
    outline: none;
    border: none;
    border-radius: 20px;
}

.logobar {
    overflow: hidden;
    height: 100px;
    position: relative;
    clear: both;
}

#logo {
    float: left;
    margin-top: 10px;
}

#logo img {
    width: 90%;
    height: auto;
}

</style>